<template>
  <div>
    <div style="display: flex;align-items: center;justify-content: center;">
      <el-card style="width: 80%;margin-top: 30px">
        <div style="margin-bottom: 10px;margin-left:5px;font-size: 20px;font-weight: bold;">历史订单</div>
        <div style="margin-bottom: 10px">
          <el-input style="width: 200px;margin: 0 5px" placeholder="查询订单号" v-model="pay_id"></el-input>
          <el-button type="primary" @click="load(1)">查询</el-button>
          <el-button type="success" @click="reset">重置</el-button>
        </div>
        <el-table ref="userTable" :data="tableData" stripe
                  :header-cell-style="{backgroundColor:'aliceblue',color:'#666'}">
          <el-table-column prop="id" label="订单号"></el-table-column>
          <el-table-column prop="hotel_name" label="酒店名称"></el-table-column>
          <el-table-column prop="room_type" label="房间名称"></el-table-column>
          <el-table-column prop="name" label="客户名"></el-table-column>
          <el-table-column prop="id_card" label="身份证号 "></el-table-column>
          <el-table-column prop="phone" label="手机号"></el-table-column>
          <el-table-column prop="checkin_date" label="开始时间"></el-table-column>
          <el-table-column prop="checkout_date" label="结束时间"></el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
          <el-table-column prop="status" label="订单状态 "></el-table-column>
          <el-table-column prop="order_type" label="订单类型"></el-table-column>
        </el-table>
        <div style="margin: 10px 0">
          <el-pagination
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="pageSize"
              layout="total,  prev, pager, next"
              :total="total">
          </el-pagination>
        </div>
      </el-card>
    </div>
    <el-dialog title="提示" :visible.sync="dialogO" width="30%">
      <div style="display: flex;justify-content: center;align-items: center">
        <div>
          <div>订单是否完成？</div>
          <div style="margin-top: 50px">
            <el-button type="primary" @click="save">完成</el-button>
            <el-button @click="dialogO = false">取消</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "recordOrder",
  data() {
    return {
      dialogO: false,
      orderFrom: {},
      tableData: [],
      user: JSON.parse(localStorage.getItem('user') || '{}'),
      business_id: "",
      pay_id: "",
      pageNum: 1,
      pageSize: 5,
      total: 0,
      hotel: [],
      hotelData: {},
      status: ['已完成', '已评价', '取消'],
    }
  },
  created() {
    this.load_business_id()
  },
  methods: {
    load_business_id() {
      this.$request.post('/hotel_search/', {
        "business_id": this.user.id,
      }).then(res => {
        if (res.code === '200') {
          this.hotel = res.data.hotel_list;
          const length = this.hotel.length;
          this.hotel_id = this.hotel[length - 1].id;
          this.hotelData = this.hotel[length - 1]
          this.load(1)
        } else if (res.code === '501') {
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    load(pageNum) {
      if (pageNum) this.pageNum = pageNum
      this.$request.post('/orders_list/', {
        "hotel_id": this.hotel_id,
        "page_size": this.pageSize,
        "page_id": this.pageNum,
        "classify_list": this.status,
      }).then(res => {
        if (res.code === '200') {
          this.tableData = res.data.order_list
          console.log("订单数据xxx", res.data)
          this.total = res.data.item_amount
        } else if (res.code === '501') {
          console.log("订单数据2", this.tableData)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleCurrentChange(pageNum) {
      this.load(pageNum)
    },
    handleEdit(row) {//完成订单
      this.orderFrom = JSON.parse(JSON.stringify(row)) //给from对象赋值,注意要深拷贝数据
      this.dialogO = true //打开弹窗
    },
    save() {
      console.log("订单数据id", this.orderFrom.id)
      this.$request.post('/order_status_update/', {
        "order_id": this.orderFrom.id,
        "status": "已完成",
      }).then(res => {
        if (res.code === '200') {
          this.$message.success('完成成功')
          this.dialogO = false
          this.load()
        } else {
          this.$message.success('完成成功')
          this.dialogO = false
          this.load()
        }
      })
    },
    reset() {
      this.pay_id = ""
      this.load(1)
    },
  }
}
</script>
<style scoped>

</style>